@import './base.less';

body {
  background-color: #ccc;
  padding-bottom: 6.6667vw;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5.8667vw;
  background-color: rgb(194, 20, 1);

  .tiao {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 81.3333vw;
    height: 4vw;

    // background-color: aqua;
    h3 {
      color: #fff;
      font-size: 2.1333vw;
    }
  }
}

.shousuo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 13.3333vw;
  background: #f1f1f2;

  .kuang {
    position: relative;
    height: 8vw;
    width: 94.6667vw;
    background: #fff;
    border-radius: 8vw;

    input {
      height: 8vw;
      width: 94.6667vw;
      border-radius: 8vw;
      padding-left: 7.2vw;
      font-size: 3.4667vw;
    }

    span {
      position: absolute;
      left: 2.8vw;
      top: 2.5333vw;
      font-size: 3.4667vw;
      color: #999;

    }
  }
}

.swiper {
  position: relative;
  height: 49.0667vw;
}

.lan {
  padding-left: 2.6667vw;
  display: flex;
  align-items: center;
  height: 7.6vw;
  background-color: rgb(82, 82, 82);

  span {
    font-size: 3.7333vw;
    color: #fff;
  }

  .laba {

    width: 4.5333vw;
    height: 3.4667vw;

  }

}

.pic {
  height: 39.0667vw;
  background-color: #fff;



  ul {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    height: 39.0667vw;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 16.8vw;
      width: 20%;
      background-color: #fff;

      img {
        width: 11.7333vw;
        height: 11.7333vw;
      }

      p {
        font-size: 3.4667vw;
        color: #000;
        margin-top: 0.9333vw;
      }
    }
  }
}

.datu {
  background-color: #fff;
  height: 31.4667vw;
}

.for {
  padding: 0.6667vw 0;
  height: 6.2667vw;
  font-size: 3.7333vw;
  background-color: #fff;
  text-align: center;
}

.commodity {
  .shouji {
    display: flex;
    padding: 1.8667vw;
    height: 27.8667vw;
    background-color: #fff;
    // margin-top: 0.6667vw;
    margin-bottom: 1.0667vw;

    .left {
      width: 38.2667vw;
      height: 23.8667vw;

      img {
        width: 22.6667vw;
      }
    }

    .right {
      display: flex;
      padding-top: 2.6667vw;
      flex-direction: column;
      // justify-content: space-between;
      align-items: flex-start;
      width: 57.2vw;
      height: 23.8667vw;

      // background-color: aqua;
      p {
        font-size: 2.5333vw;

        &:nth-child(2) {
          font-size: 2.2667vw;
          color: #999;
          padding-top: 1.2vw;
        }

        &:nth-child(3) {
          padding-top: 1.3333vw;
          font-size: 2.9333vw;
          color: #f03c3c;

          span {
            font-size: 2.2667vw;
            color: #999;
            text-decoration: line-through;
          }
        }
      }
    }
  }

}

.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 6.6667vw;
  background-color: pink;
  border-top: 1px solid #999;

  ul {
    display: flex;
    // align-items: center;

    height: 6.6667vw;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 25%;
      height: 6.6667vw;
      background-color: #fff;

      &:nth-child(1) span {
        color: #fa2209;
      }

      &:nth-child(1) a {
        color: #fa2209;
      }

      span {
        font-size: 3.2vw;
      }

      a {
        font-size: 1.6vw;
      }

    }
  }
}